---
title: Palette
redirect_from:
  - /foundation/color/color-blocks/
---

import Palette from "../../../components/Palette";

Every color from Orbit is available directly as a token,
such as <InlineToken name="paletteInkLight" /> and <InlineToken name="paletteProductNormal" />.

If you need more detailed color guidelines,
checkout the [general Color page](/foundation/color/).
See especially the [guidelines for the additional shades](/foundation/color/#orbit-palette).

## Product

<Palette
  allowAdditional
  colors={[
    "paletteProductLight",
    "paletteProductNormal",
    "paletteProductDark",
    "paletteProductDarker",
  ]}
/>

## White

<Palette allowAdditional colors={["paletteWhite"]} />

## Cloud

<Palette
  allowAdditional
  colors={["paletteCloudLight", "paletteCloudNormal", "paletteCloudDark", "paletteCloudDarker"]}
/>

## Ink

<Palette allowAdditional colors={["paletteInkLight", "paletteInkNormal", "paletteInkDark"]} />

## Green

<Palette allowAdditional colors={["paletteGreenLight", "paletteGreenNormal", "paletteGreenDark"]} />

## Orange

<Palette
  allowAdditional
  colors={["paletteOrangeLight", "paletteOrangeNormal", "paletteOrangeDark"]}
/>

## Red

<Palette allowAdditional colors={["paletteRedLight", "paletteRedNormal", "paletteRedDark"]} />

## Blue

<Palette allowAdditional colors={["paletteBlueLight", "paletteBlueNormal", "paletteBlueDark"]} />
